<template>
	<view class="area-b">
		<u-navbar title="投诉" :border-bottom="false"></u-navbar>
		<view class="cu-list menu margin-top-sm" v-if="!type">
			<view class="margin-left-sm">选择投诉原因</view>
			<view class="cu-item arrow" data-type="色情" @tap="next">
				<view class="content">
					<view class="title">色情</view>
				</view>
				<view class="picker"></view>
			</view>
			<view class="cu-item arrow" data-type="骚扰" @tap="next">
				<view class="content">
					<view class="title">骚扰</view>
				</view>
				<view class="picker"></view>
			</view>
			<view class="cu-item arrow" data-type="诈骗" @tap="next">
				<view class="content">
					<view class="title">诈骗</view>
				</view>
				<view class="picker"></view>
			</view>
			<view class="cu-item arrow" data-type="恶意营销" @tap="next">
				<view class="content">
					<view class="title">恶意营销</view>
				</view>
				<view class="picker"></view>
			</view>
			<view class="cu-item arrow" data-type="违法犯罪" @tap="next">
				<view class="content">
					<view class="title">违法犯罪</view>
				</view>
				<view class="picker"></view>
			</view>
			<view class="cu-item arrow" data-type="侵权" @tap="next">
				<view class="content">
					<view class="title">侵权</view>
				</view>
				<view class="picker"></view>
			</view>
			<view class="cu-item arrow" data-type="隐私信息收集" @tap="next">
				<view class="content">
					<view class="title">隐私信息收集</view>
				</view>
				<view class="picker"></view>
			</view>
			<view class="cu-item arrow" data-type="其他" @tap="next">
				<view class="content">
					<view class="title">其他</view>
				</view>
				<view class="picker"></view>
			</view>
		</view>
		<!-- 具体内容填写 -->
		<form @submit="formSubmit">
			<view class="margin-top-sm" v-if="type">
				<view class="margin-left-sm">已选投诉原因</view>
				<view class="cu-list menu">
					<view class="cu-item">
						<view class="content">
							<view class="title">{{type}}</view>
						</view>
						<view class="picker"><text class="cuIcon-check" style="color:#07C160;"></text></view>
					</view>
				</view>
				<view class="margin-left-sm margin-top-xs">投诉描述</view>
				<view class="cu-list menu">
					<view class="cu-item">
						<view class="content">
							<view class="title">投诉内容</view>
						</view>
						<view class="picker"></view>
					</view>
					<view class="cu-item">
						<view class="content">
							<textarea name="describe" class="margin-top-xs" style="height:200rpx;width:100%;" placeholder="详细的描述有帮助与我们快速定位问题"></textarea>
						</view>
					</view>
					<view class="cu-bar">
						<view class="action">
							证据截取（选填)
						</view>
						<view class="action">
							{{imgList.length}}/4
						</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view v-for="(item, index) in imgList" :key="index" class="bg-img" @tap="ViewImage(item.imgUrl)">
								<image :src="item.imgUrl" mode="aspectFill" />
								<view class="cu-tag bg-red" @tap.stop="DelImg(index)">
									<text class="cuIcon-close"></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
								<text class="cuIcon-cameraadd"></text>
							</view>
						</view>
					</view>
					<view class="margin-left-sm margin-top-xs">联系电话（选填）</view>
					<view class="cu-item">
						<view class="content">
							<input name="phone" type="text" placeholder="请填写你的手机号"></input>
						</view>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<button form-type="submit" style="background:#07C160;color:#FFFFFF" class="cu-btn margin-tb-sm lg" role="button"
					 aria-disabled="false">提交</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		toast,
		delay,
		goback
	} from '@/utils/util';
	import {uploadFile,chooseImage,getImageInfo} from '@/utils/file'
	import {complain} from "@/api/complain.js"
	export default {
		data() {
			return {
				businessId: "",
				businessType: "",
				imgList: [],
				type: ""
			};
		},
		onLoad({btype='',bid=''}) {
			this.businessId = bid
			this.businessType = btype
		},
		methods: {
			next(e) {
				const type = e.currentTarget.dataset.type;
				this.type = type
			},

			DelImg(index) {
				uni.showModal({
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(index, 1);
						}
					}
				});
			},

			ViewImage(index) {
				uni.previewImage({
					urls: this.imgList.map(item => item.imgUrl),
					current: index
				});
			},

			async ChooseImage() {
				const {
					tempFiles
				} = await chooseImage({
					count: 4 - this.imgList.length
				});
				let newFiles = tempFiles.reduce((total, item) => {
					let obj = {
						imgUrl: item.path,
						finished: false,
						percent: 0,
						file: item,
						mediaUrl: '',
						width: 0,
						height: 0
					}
					total.push(obj)
					
					getImageInfo({
						src: item.path
					}).then(info => {
						obj.width = info.width;
						obj.height = info.height;
					})
					uploadFile({
						file: item,
						onProgressUpdate: ({
							progress
						}) => {
							obj.percent = progress;
						}
					}).then(mediaUrl => {
						obj.finished = true;
						obj.mediaUrl = mediaUrl;
					}).catch(e => {
						this.originImgList = this.originImgList.filter(item => item !== obj);
						toast('文件上传失败,请稍后尝试')
					})
					return total
				}, [])
				this.imgList.push(...newFiles);

			},

			async formSubmit(e) {
				console.log('form发生了submit事件，携带数据为：', e.detail.value);
				var describe = e.detail.value.describe;
				var phone = e.detail.value.phone;
				var businessId = this.businessId;
				var businessType = this.businessType;
				var imageList = this.imgList;
				var type = this.type;

				if (!describe) {
					toast('描述不能为空哦！');
					return;
				}
				const res = await complain({
					businessId,
					businessType,
					type,
					describe,
					phone,
					imageList
				})
				if (res) {
					uni.showToast({
						title: '投诉提交成功',
						icon: 'success',
						duration: 2000
					});
					await delay(2000)
					goback()
				} else {
					uni.showToast({
						title: '提交失败，请联系客服',
						icon: 'warn',
						duration: 2000
					});
				}
			}
		}
	};
</script>
<style scoped>
	.cu-form-group .title {
	  min-width: calc(4em + 30rpx);
	}
</style>